<template>
  <div class="header_margin-top">
    <Header/>
    <div class="clearfix con-width-1200">
      <div class="public-title clearfix pos-rel">
        <h2 class="pos-rel course">course</h2>
        <h1 class="pos-abs">课程</h1>
        <h3 class="pos-abs">你说，不知道想要练哪种瑜伽课？我说，趁年轻，不做旁观者。</h3>
        <div class="catage clearfix pos-abs">您所有在位置：首页 > 课程 > 列表</div>
      </div>

      <ul class="course-list clearfix">
        <li
          class="clearfix pos-rel"
          v-for="site in courseList"
          :key="site.id"
        >
          <p class="pos-abs tit text-wid">{{site.title}}~</p>
          <img :src="site.imgUrl" class="img">
          <div class="pos-abs clearfix detail">
            <p class="time clearfix">{{site.time}}</p>
            <p class="tit text-wid">{{site.title}}</p>
            <p class="con">{{site.content}}</p>
            <!-- <p class="more rad5">查看详情</p> -->
          </div>
        </li>
      </ul>
      <div class="clear hei20"></div>
      <div class="pagesize clearfix">
        <span class="pre"><<</span>
        <span class="pre"><</span>
        <span>1</span>
        <span class="pre">></span>
        <span class="pre">>></span>
      </div>
    </div>
    <Footer/>
  </div>
</template>

<script>
import Header from './Header.vue'
import Footer from "./Footer.vue";
import _http from "../httpService";

export default {
  name: "Course",
  props: {
    msg: String
  },
  data() {
    return {
      courseList: []
    };
  },
  components: {
    Header,
    Footer
  },
  mounted() {
    _http
      .get("/content/selectListByEnterpriseIdAndCatalogCode?catalogCode=course")
      .then(response => {
        this.courseList = [];
        response.data.forEach(element => {
          this.courseList.push({
            id: element.id,
            title: element.title,
            content: element.summary,
            imgUrl: element.previewImage
          });
        });
      })
      .catch(error => console.log(error))
      .finally(() => (this.loading = false));
  },
  methods: {
    li_click: function(id) {
      console.log(id);
      this.$router.push({ path: "/detail/" + id });
    }
  }
};
</script>

<style>
body {
  background: #f4f4f4 !important
}
.header_margin-top {
  margin: 0px !important;
  padding-top: 120px !important;
}
.course-list li {
  float: left;
  width: 350px;
  height: 440px;
  padding: 0px;
  margin: 0px 70px 50px 0px;
  border: 1px solid #ddd;
  background: #fff;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
}
.course-list li:nth-child(3),
.course-list li:nth-child(6) {
  margin-right: 0px;
}
.course-list li img {
  height: 100%;
  -webkit-transform: translate(-25%,0%);
  -moz-transform: translate(-25%,0%);
  -ms-transform: translate(-25%,0%);
  -o-transform: translate(-25%,0%);
  transform: translate(-25%,0%);
}
.course-list li > .tit {
  bottom: 0px;
  left: 0px;
  right: 0px;
  text-align: center;
  font: normal 16px/90px "Microsoft YaHei";
  background: rgba(50, 29, 25, 0.8);
  color: #fff;
}
.course-list .detail> .con {
  font-size: 14px;
  line-height: 30px;
  text-align: left;
  max-height:240px;overflow:hidden;
}
.course-list .detail {
  top: auto;
  bottom: -200%;
  left: 0px;
  z-index: 8;
  width: 100%;
  height: 440px;
  text-align: center;
  background: rgba(233, 124, 76, 0.8);
  padding: 40px 20px 20px 20px;
  color: #fff;
  line-height: 30px;
}
.course-list .detail > .time {
  font-size: 18px;
  font-weight: bold;
}
.course-list .detail > .tit {
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0px;
}
.course-list .detail > .more {
  display: inline-block;
  padding: 0px 15px;
  margin-top: 20px;
  background: #fff;
  line-height: 30px;
  color: #e97c4c;
  font-weight: bold;
}
.course-list li:hover .detail {
  bottom: 0px;
  transition: 0.8s;
}
.pagesize {
  display: block;
  width: 100%;
  padding: 20px 0px;
  text-align: center;
}
.pagesize span {
  display: inline-block;
  width: 35px;
  height: 35px;
  margin: 5px;
  text-align: center;
  font: normal 16px/35px "Arial";
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  background: #f38656;
  color: #fff;
  cursor: pointer;
}
.pagesize span.pre {
  background: #544441;
}
.public-title h2.course:before {
  width: 180px;
}
</style>
